<html>

<head>
	<title>Checkout</title>
	<link rel="stylesheet" type="text/css" href="./css/common.css" />
	<link href="./css/shop-cart.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="padding: 0 0 0 300px;">
	<div id="box">
		<h1>Checkout</h1>
		<hr align="left"/>
		<p>Welcome <span class="cus_name"></span> to our store. (<a href="./logout.html"><font color="#FBB917">If you're not <span class="cus_name"></span>, click here to logout</font></a>)</p>
		<ul class="toolbar_links">
			<li><a href="./account.html"><img src="./css/images/btn-MyAcc1.png"/></a></li>
			<li><a href="./storefront.html"><img src="./css/images/btn-ConShop1.png"/></a></li>
			<li><a href="./logout.html"><img src="./css/images/btn-logout-gr.png"/></a></li>
		</ul>
		<br/><br/>
		<h2>Review Your Order</h2>
		<hr align="left"/>
		<div id="cart_content_div"></div>
		To delete an item, change its quantity to 0, then click Update Quantity.
		<div id="msg"></div><br/><br/>
		<form action="./purchase.html">
			<input type="image" src="./css/images/btn-Continue.png" value="Continue"/>
		</form>
	</div>
	<!-- 
		Javascript section
	-->
	<script type="text/javascript" src="./scripts/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="./scripts/common.js"></script>
	<script type="text/javascript">
		
		ajaxSetup();
		checkLogin();
		
		// Show cart content.
		$.getJSON("./cart.php?method=getCartContent", function(resp) {
			// Present the cart content as a table.
			content = '<table>';
			$.each(resp, function(index, prod) {
				content += '<tr id="' + prod.prod_id + '">';
				content += '<td><img src="' + prod.prod_image + '"/></td>';
				content += '<td>' + prod.prod_name + '</td>';
				content += '<td>Quantity:' + createSelectForQuantity(prod.prod_id + '_qty', 0, 100, prod.qty) + '</td>';
				content += '<td><input type="button" class="button" id="' + prod.prod_id + '" value="Update Quantity"/></td>';
				content += '</tr>';
			});
			content += '</table>';
			$("#cart_content_div").html(content);

			// Hook up add items to cart action when user clicks the buttons.
			$("#cart_content_div input.button").click(function() {
				var prodId = this.id;
				$.getJSON("./cart.php?method=updateCartItemCount",
				{
					prod_id: prodId,
					count: $("#cart_content_div select#" + prodId + "_qty").val()
				},
				function(resp) {
					if (resp.succeed) {
						$("#msg").html('Item quantity updated.');
					}
					else {
						$("#msg").html(resp.msg);
						$("#cart_content_div select#" + prodId + "_qty").val(resp.qty);
					}
					if (resp.qty == 0) {
						$("#cart_content_div tr#" + prodId).remove();
					}
				});
			});
		});

	</script>
</div>
</body>
</html>